<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dream</title>

    <!-- Bootstrap Styles-->
    <link href="/static/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="/static/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="/static/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href="/static/css/open_sans.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="/static/lib/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- TABLE STYLES-->
    <link href="/static/lib/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html" style="text-align: center;font-size: 25px">学生签到系统</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">
            <!-- /.dropdown -->
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <!--<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>-->
                    <!--</li>-->
                    <!--<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>-->
                    <!--</li>-->
                    <!--<li class="divider"></li>-->
                    <!--<li><a href="#"><i class="fa fa-sign-out fa-fw"></i> Logout</a>-->
                    <!--</li>-->
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="index.html"><i class="fa fa-dashboard"></i> 签到记录</a>
                </li>
                <!--<li>-->
                    <!--<a href="#"><i class="fa fa-sitemap"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>-->
                    <!--<ul class="nav nav-second-level">-->
                        <!--<li>-->
                            <!--<a href="#">Second Level Link</a>-->
                        <!--</li>-->
                        <!--<li>-->
                            <!--<a href="#">Second Level Link</a>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</li>-->
            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper" >
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header" style="margin-bottom: 0px">
                       签到记录
                    </h1>
                    <button class="btn btn-success" style="float: right;margin: 8px" onclick="make_excel()">导出报表</button>
                </div>
            </div>
            <!-- /. ROW  -->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                    <tr>
                                        <th style="width: 50px">编号</th>
                                        <th style="width: 100px">学生姓名</th>
                                        <th style="width: 100px">学生班级</th>
                                        <th style="width: 150px">签到时间</th>
                                        <th style="width: auto">家长寄语</th>
                                    </tr>
                                    </thead>
                                    <tbody id="sign_body">
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                    <!--End Advanced Tables -->
                </div>
            </div>
        </div>
    </div>
    <!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
<!-- /. WRAPPER  -->
<!-- JS Scripts-->

<!-- jQuery Js -->
<script src="/static/lib/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="/static/lib/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="/static/lib/jquery.metisMenu.js"></script>
<!-- DATA TABLE SCRIPTS -->
<script src="/static/lib/dataTables/jquery.dataTables.js"></script>
<script src="/static/lib/dataTables/dataTables.bootstrap.js"></script>
<!-- Custom Js -->


<script>
    var sign_table;

    var report_grade;
    $(document).ready(function () {
        sign_table = $('#dataTables-example').dataTable();
        $("#dataTables-example_filter").empty();
        
        $("#dataTables-example_filter").append('   <div style="text-align: right;vertical-align:middle;height: 30px">\n' +
            '                                <select  name="class_select" id="class_list" class="form-control" size="1" style="width: 120px;float: right;margin-left: 10px">\n' +
            '                                </select>\n' +
            '                            </div>\n' +
            '                         ');

        $("#class_list").change(function () {
            var selected=$(this).children('option:selected').val();
            report_grade = selected;
            if(selected=='no'){
                return
            }else{
                getClassTable(selected);
            }

        })
    });
    var first_class=''
    //获取签到列表
    function getClass(){
        $.ajax({
            type:"post",
            dataType:"html",
            url:"/admin/index/getClass",
            data:null,
            success:function(args){
                var json=eval(args);
                first_class = json[0].p_grade;
                report_grade = json[0].p_grade;
                getClassTable(first_class);
                for(var i =0;i<json.length;i++){
                    var option
                    if(i==0){
                        option= "<option value='"+json[i].p_grade+"' selected>"+json[i].p_grade+"</option>"
                    }else{
                        option = "<option value='"+json[i].p_grade+"'>"+json[i].p_grade+"</option>"
                    }
                    $("#class_list").append(option)
                }
                var option = "<option value='all'>全部</option>"
                $("#class_list").append(option)

            },
            error:function(jqXHR, textStatus, errorThrown){
            },
        });

    }
    getClass();
    //获取签到列表
    function getClassTable(grade){
        var postData = {
            "grade":grade
        };
        $.ajax({
            type:"post",
            dataType:"html",
            url:"/admin/index/getSignTable",
            data:postData,
            success:function(args){
                var json=eval(args);
                $('#dataTables-example').dataTable().fnClearTable();
                $('#dataTables-example').dataTable().fnAddData(packagingdatatabledata(json),true);

            },
            error:function(jqXHR, textStatus, errorThrown){
            },
        });
    }

    //设置表格
    function packagingdatatabledata(data){
        var a=[];   //全部行数据的list
        var banddata = data
            for(var i = 0;i<banddata.length;i++){
                var tempObj=[];     //一行数据的list
                    tempObj.push(banddata[i].id);
                    tempObj.push(banddata[i].p_name);
                    tempObj.push(banddata[i].p_class);
                    tempObj.push(banddata[i].create_time);
                    tempObj.push(banddata[i].p_message);
                    a.push(tempObj);

            }
            console.log(a);
        return a;
    }
    function set_table(json) {
        var tbody="";
        for(var i=0;i<json.length;i++){
            tbody += "   <tr class=''>\n" +
                "                                        <td>"+json[i].id+"</td>\n" +
            "                                        <td>"+json[i].p_name+"</td>\n" +
            "                                        <td>"+json[i].p_class+"</td>\n" +
            "                                        <td >"+json[i].create_time+"</td>\n" +
            "                                        <td >"+json[i].p_message+"</td>\n" +
            "                                    </tr>"
        }

        $("#sign_body").html(tbody);
    }

    //导出报表
    function make_excel() {
        // var data=$("#table_content").data("source");

        var form = $("<form/>").attr('action','exportExcel').attr('method','post');
        form.attr('target','_blank');
        var input = '';
        console.log("导出班级："+report_grade);
        input += '<input type="hidden" name="report_grade" value="'+report_grade+'" />';

        form.append(input).appendTo("body").css('display','none').submit();

    }
</script>
<script src="/static/lib/morris/raphael-2.1.0.min.js"></script>
<script src="/static/lib/morris/morris.js"></script>
<script src="/static/lib/custom-scripts.js"></script>

</body>
</html>
